---
title: Attachment
---

import { Steps, Step } from "fumadocs-ui/components/steps";
import { AttachmentSample } from "@/components/samples/attachment-sample";
import { Callout } from "fumadocs-ui/components/callout";
import { InstallCommand } from "@/components/docs/install-command";

## Overview

The Attachment components let the user attach files and view the attachments.

<AttachmentSample />

<Callout type="info">
  **Note:** These components provide the UI for attachments, but you also need
  to configure attachment adapters in your runtime to handle file uploads and
  processing. See the [Attachments Guide](/docs/guides/Attachments) for complete
  setup instructions.
</Callout>

## Getting Started

<Steps>
  <Step>

### Add `attachment`

<InstallCommand shadcn={["attachment"]} />

This adds a `/components/assistant-ui/attachment.tsx` file to your project, which you can adjust as needed.

  </Step>
  <Step>

### Use in your application

```tsx title="/components/assistant-ui/thread.tsx" {1-4,9-10}
import {
  ComposerAttachments,
  ComposerAddAttachment,
} from "@/components/assistant-ui/attachment";

const Composer: FC = () => {
  return (
    <ComposerPrimitive.Root className="...">
      <ComposerAttachments />
      <ComposerAddAttachment />

      <ComposerPrimitive.Input
        autoFocus
        placeholder="Write a message..."
        rows={1}
        className="..."
      />
      <ComposerAction />
    </ComposerPrimitive.Root>
  );
};
```

```tsx title="/components/assistant-ui/thread.tsx" {1,8}
import { UserMessageAttachments } from "@/components/assistant-ui/attachment";

const UserMessage: FC = () => {
  return (
    <MessagePrimitive.Root className="...">
      <UserActionBar />

      <UserMessageAttachments />

      <div className="...">
        <MessagePrimitive.Parts />
      </div>

      <BranchPicker className="..." />
    </MessagePrimitive.Root>
  );
};
```

  </Step>
</Steps>
